$(document).ready(function () {
  //! jQuery代码写在这里
  console.log("当前dom已经ready");
});

// 或者简写为
$(function () {
  //! jQuery代码写在这里
  console.log("简化版dom已经准备完成，开始书写jQjuery代码");

  //TODO 1.获取元素
  // 元素选择器
  $("p"); // 选择所有<p>元素

  // id选择器
  $("#text"); // 选择id="text"的元素

  // class选择器
  $(".text"); // 选择所有class="text"的元素

  // 组合选择器
  $("p.intro"); // 选择所有class="intro"的<p>元素

  // 属性选择器
  $("a[target='_blank']"); // 选择所有target属性等于"_blank"的<a>元素

  //TODO 2.获取文本内容
  const a = $("#text").text();
  console.log("=>", a);

  // 设置文本内容
  $("#特系统").text("Hello world!");

  // 获取HTML内容
  const b = $("#text").html();
  console.log("==>", b);

  // 设置HTML内容
  $("#text").html("<b>Hello world!</b>");
  const c = $("#text").html();
  console.log("===>", c);

  // 获取表单值
  $("input#name").val();
  console.log("!==", $("input#name").val());

  // 设置表单值
  $("input#name").val("萧容鱼");

  //TODO 3.处理css样式
  //? 貌似css中展示的颜色不论是十六进制还是rgb，打印出来都是rgb
  console.log("==>", $("p.li_shi_ya").css("color"));

  // 设置css样式
  $("p.li_shi_ya").css("color", "red");

  // 添加类
  $("p").addClass("important");

  // 移除类
  $("p").removeClass("important");

  //mark 切换类
  $("p").toggleClass("important");
  /*
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
*/

  //TODO 4.事件绑定
  // 点击事件
  $("p.li_shi_ya").click(function () {
    $(this).hide(); // 点击后隐藏当前p元素
  });

  // 双击事件
  $("p.shen_you_chu").dblclick(function () {
    $(this).hide(); // 双击后隐藏当前p元素
    console.log("双击");
  });
});
